<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding:0px;
		}
		body{
			background: #1E1E1E url() 0 0 no-repeat;
		}

		ul{
			width: 1260px;
			margin: 50px auto;
			height: 260px;
		}

		li{
			width: 172px;
			height: 260px;
			background: #fff url(./1.jpg) 0 0 no-repeat;
			float: left;
			list-style: none;
			background-position: center;
			cursor: pointer;
		}
		.box2{
			background-image: url(./2.jpg);
		}
		.box3{
			background-image: url(./3.jpg);
		}
		.box4{
			background-image: url(./4.jpg);
		}
		.box5{
			background-image: url(./5.jpg);
		}
		.box6{
			background-image: url(./6.jpg);
		}
		.box7{
			background-image: url(./7.jpg);
		}
		
	</style>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function  (argument) {
			
			$('li').hover(function() {
				$(this).stop().animate({width:'400px'}, 400).siblings().stop().animate({width:'134px'}, 400);
			}, function() {
				$('li').stop().animate({width: "172px"}, 400)
			});

		})
	</script>
</head>
<body>
	<ul>
		<li class="box1"></li>
		<li class="box2"></li>
		<li class="box3"></li>
		<li class="box4"></li>
		<li class="box5"></li>
		<li class="box6"></li>
		<li class="box7"></li>
	</ul>
</body>
</html>